
  <template>
  <div>
    <!-- 第一板块 -->
    <div class="content">
      <!-- 品牌公司属性 -->
      <div class="cardLeft">
        <el-card>
          <el-form label-width="140px">
            <el-card>
              <el-form-item
                label-width="60%"
                label="孵化活动参数设置"
                style="background: #e1e1e1"
              />
              <el-form-item label-width="40px">
                <el-form-item
                  label-width="230px"
                  label="孵化活动是否开启："
                  style="width: 50%; display: inline-block;"
                >
                  <span v-if="tableData.isOpen === 1">否</span>
                  <span v-if="tableData.isOpen === 0">是</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="230px"
                  label="公司孵化活动报名开始时间："
                  style="width: 50%; display: inline-block;"
                >
                  <span v-if="tableData.startDate !== ''"
                    ><input
                      :value="tableData.startDate | formatDateStr('yyyy-MM-dd')"
                      type="text"
                      readonly
                  /></span>
                  <span v-if="tableData.startDate == ''">-- </span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="230px"
                  label="公司孵化活动报名结束时间："
                  style="width: 50%; display: inline-block;"
                >
                  <span v-if="tableData.endDate !== ''"
                    ><input
                      :value="tableData.endDate | formatDateStr('yyyy-MM-dd')"
                      type="text"
                      readonly
                  /></span>
                  <span v-if="tableData.endDate == ''">-- </span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="230px"
                  label="公司孵化预备期时长(天)："
                  style="width: 50%; display: inline-block;"
                >
                  <span>{{ tableData.preparatoryPeriod }}</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="230px"
                  label="孵化期时长(天)："
                  style="width: 50%; display: inline-block;"
                >
                  <span>{{ tableData.incubatePeriod }}</span>
                </el-form-item>
              </el-form-item>
              <el-form-item label-width="40px" >
                <el-button
                  type="primary"
                  @click="onSet"
                  style="margin-left: 40%;"
                  size="small"
                  icon="el-icon-edit"
                >
                  设置</el-button
                >
              </el-form-item>
              <!-- <el-dialog> -->
              <el-dialog
                title="设置"
                :visible.sync="detailVisible"
                width="600px"
                top="5vh"
                v-dialogDrag
                :close-on-click-modal="false"
              >
                <el-form ref="formRef">
                  <el-form-item label-width="40px">
                    <el-form-item
                      label-width="230px"
                      label="孵化活动是否开启："
                      style="display: inline-block"
                    >
                      <span>{{ value == false ? "关闭" : "开启" }}</span>
                      &nbsp;
                      <el-switch
                        v-model="value"
                        @change="onChange4"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                      >
                      </el-switch>
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label-width="40px">
                    <el-form-item
                      label-width="230px"
                      label="公司孵化活动报名开始时间："
                      style="width: 30%; display: inline-block"
                    >
                      <el-date-picker
                        v-model="startDate"
                        type="date"
                        placeholder="选择日期"
                        @change="onChange1"
                        format="yyyy-MM-dd"
                        :clearable="false"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label-width="40px">
                    <el-form-item
                      label-width="230px"
                      label="公司孵化活动报名结束时间："
                      style="width: 30%; display: inline-block"
                    >
                      <el-date-picker
                        v-model="endDate"
                        type="date"
                        placeholder="选择日期"
                        @change="onChange2"
                        format="yyyy-MM-dd"
                        :clearable="false"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label-width="40px">
                    <el-form-item prop="preparatoryPeriod" :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                      label-width="260px"
                      label="公司孵化预备期时长（天）："
                      style="width: 80%; display: inline-block"
                    >
                      <el-input-number
                        v-model="preparatoryPeriod"
                        controls-position="right"
                        @change="onChange3"
                        :min="1"
                        :max="99999"
                        style="width: 120px"
                      ></el-input-number>
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label-width="40px">
                    <el-form-item prop="incubatePeriod" :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                      label-width="230px"
                      label="孵化期时长（天）："
                      style="width: 80%; display: inline-block"
                    >
                      <el-input-number
                        v-model="incubatePeriod"
                        controls-position="right"
                        @change="onChange5"
                        :min="1"
                        :max="99999"
                        style="width: 120px"
                      ></el-input-number>
                    </el-form-item>
                  </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="delateForm">取 消</el-button>
                  <el-button @click="saveForm" type="primary" :loading="disabled">保 存</el-button>
                </span>
              </el-dialog>
            </el-card>
          </el-form>
        </el-card>
      </div>
      <!-- 第二板块 -->
      <div class="cardRight">
        <el-card>
          <el-form label-width="140px">
            <el-card>
              <el-form-item
                label-width="60%"
                label="孵化达标参数设置"
                style="background: #e1e1e1"
              />
              <el-form-item label-width="20px">
                <el-form-item
                  label-width="380px"
                  label="合伙人孵化参数（合作商城贡献值）（元）："
                  style="width: 30%; display: inline-block; margin-left: 5%"
                >
                  <span>{{ paramsSetForm.contributionvalue }}</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="20px">
                <el-form-item
                  label-width="380px"
                  label="县级公司孵化达标参数："
                  style="width: 30%; display: inline-block; margin-left: 5%"
                >
                  <span>{{ paramsSetForm.areatarget }}</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="20px">
                <el-form-item
                  label-width="380px"
                  label="市级公司孵化达标参数："
                  style="width: 30%; display: inline-block; margin-left: 5%"
                >
                  <span>{{ paramsSetForm.citytarget }}</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="380px"
                  label="省级公司孵化达标参数："
                  style="width: 30%; display: inline-block; margin-left: 2%"
                >
                  <span>{{ paramsSetForm.provincetarget }}</span>
                </el-form-item>
              </el-form-item>

              <el-form-item label-width="40px">
                <el-form-item
                  label-width="380px"
                  label="全球公司孵化达标参数："
                  style="margin-left: 2%"
                >
                  <div>
                    <span>{{ paramsSetForm.gloaltarget }}</span>

                  </div>
                </el-form-item>
              </el-form-item>

              <span style="color:orange;margin-left:20%;position:absolute;top:410px;left:40%">注意：以上的参数是能组建县级孵化公司的全球品牌合伙人数量</span>

              <el-form-item label-width="40px">
                <el-button
                        type="primary"
                        @click="onSetf"
                        style="margin-left: 40%"
                        size="small"
                        icon="el-icon-edit"
                      >
                        设置</el-button
                      >
              </el-form-item>
            </el-card>
          </el-form>
        </el-card>
      </div>
      <!-- <el-dialog> -->
      <el-dialog
        title="设置"
        :visible.sync="setVisible"
        width="750px"
        top="5vh"
        v-dialogDrag
        v-loading="loading"
      >
        <el-form
          :model="paramsSetFormData"
          ref="paramsSetFormData"
          :rules="rules"

        >
          <el-form-item label-width="40px">
            <el-form-item
              label-width="400px"
              label="合伙人孵化参数（合作商城贡献值）（元）："
              :inline="true"
              prop="contributionvalue"
            >
              <el-input-number
                v-model="paramsSetFormData.contributionvalue"
                label="描述文字"
                :controls="false"
                :min="1"
              ></el-input-number>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="40px">
            <el-form-item
              label-width="400px"
              :inline="true"
              label="县级公司孵化达标参数（孵化达标数量）："
              prop="areatarget"
            >
              <el-input-number
                v-model="paramsSetFormData.areatarget"
                label="描述文字"
                :min="1"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="40px">
            <el-form-item
              label-width="400px"
              :inline="true"
              label="市级公司孵化达标参数（孵化达标数量）："
              prop="citytarget"
            >
              <el-input-number
                v-model="paramsSetFormData.citytarget"
                :min="1"
                label="描述文字"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="40px">
            <el-form-item
              label-width="400px"
              :inline="true"
              label="省级公司孵化达标参数（孵化达标数量）："
              prop="provincetarget"
            >
              <el-input-number
                v-model="paramsSetFormData.provincetarget"
                :min="1"
                label="描述文字"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form-item>

          <el-form-item label-width="40px">
            <el-form-item
              :inline="true"
              label-width="400px"
              label="全球公司孵化达标参数（孵化达标数量）："
              prop="gloaltarget"
            >
              <el-input-number
                v-model="paramsSetFormData.gloaltarget"
                :min="1"
                label="描述文字"
                :controls="false"
              ></el-input-number>
            </el-form-item>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="delateForm">取 消</el-button>
          <el-button @click="saveForm2" type="primary" :loading="disload">保 存</el-button>
        </span>
      </el-dialog>
      </div>
      <!-- 第三板块 -->
      <div class="contentNext">
        <!-- 品牌公司开发关系 -->
        <div class="nextLeft" >
          <el-card>
            <el-form label-width="140px" >
              <el-card>
                <el-form-item
                  label-width="70%"
                  label="可参与孵化活动商城隶属品牌公司设置"
                  style="background: #e1e1e1"

                />
                <div v-for="(item, index) in tableData3" :key="item.activityid">
                  <el-form-item label-width="40px">
                    <el-form-item style="display: inline" v-if="index < 10">{{
                      item.companyname
                    }}</el-form-item>
                  </el-form-item>
                </div>
                <el-form-item label-width="200px">
                  <span style="color: #4acf1e" v-if="tableData3.length >= 10"
                    >请点击设置按钮查看更多数据</span
                  >&nbsp;
                  <el-button
                    type="primary"
                    @click="onSete"
                    style="margin-left: 20%"
                    size="small"
                    icon="el-icon-edit"
                    >设置</el-button
                  >
                </el-form-item>
              </el-card>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  <!-- </div> -->
</template>
<script>
import {
  getRules,
  setRules,
  postList,
} from "../../api/incubationrules/index.js";
import {
  getIncubateCompanyConfig,
  saveIncubateCompanyConfig,
} from "../../api/companyLevel";
export default {
  data() {
    return {
      loading:false,
      disabled:false,
      disload:false,
      tableData: {}, //列表对象 1否，0是
      detailVisible: false,
      setVisible: false,
      value: false, //0是开启,1是关闭
      startDate: "", //开始时间
      endDate: "", //结束时间
      preparatoryPeriod: "", //时长
      incubatePeriod:"",//孵化期时长
      isOpen: "", //判断是否开启
      tableData2: {
        price: 50000,
        companyNum: 3,
        companyNum1: 3,
        companyNum2: 6,
        companyNum3: 10,
      }, //列表对象2
      paramsSetForm: {},
      tableData3: [],
      query: {
        currentPage: 1,
        pageSize: 10,
      },
      paramsSetFormData: {},
      rules: {
        areatarget: [
          {
            required: true,
            message: "请输入县级公司孵化达标数量",
            trigger: "blur",
          },
        ],
        citytarget: [
          {
            required: true,
            message: "请输入市级公司孵化达标数量",
            trigger: "blur",
          },
        ],
        contributionvalue: [
          {
            required: true,
            message: "请输入合伙人孵化参数",
            trigger: "blur",
          },
        ],
        gloaltarget: [
          {
            required: true,
            message: "请输入全球公司孵化达标数量",
            trigger: "blur",
          },
        ],
        provincetarget: [
          {
            required: true,
            message: "请输入省级公司孵化达标数量",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //获取第一块内容信息
    getRules() {
      getRules().then((res) => {
        // console.log(res);
        this.tableData = res.data || {};
      });
    },
    //设置第一块内容
    onSet() {

      this.detailVisible = true;

      this.startDate = this.tableData.startDate || ""; //开始日期
      this.endDate = this.tableData.endDate || ""; //结束日期
      // console.log(this.tableData.isOpen )
      if (this.tableData.isOpen == 1) {
        this.value = false;
      } else {
        this.value = true;
      }
      this.preparatoryPeriod = this.tableData.preparatoryPeriod || "";
      this.incubatePeriod =this.tableData.incubatePeriod || ""
      setTimeout(() => {
        this.$refs['formRef'].clearValidate()
      }, 1000)

    },
    /*获取孵化达标参数*/
    getGlobalBrandList() {
      this.loading = true;
      getIncubateCompanyConfig()
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);

            return false;
          }
          if (response.data.list.length > 0) {
            this.paramsSetForm = response.data.list[0];
          }
        })
        .catch(() => {});
    },
    //dialog公用取消
    delateForm() {
      this.detailVisible = false;
      this.setVisible = false;

    },
    //保存调用接口
    saveForm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          let data = {
            endDate: this.endDate,
            isOpen: this.isOpen,
            preparatoryPeriod: this.preparatoryPeriod,
            startDate: this.startDate,
            incubatePeriod: this.incubatePeriod
          };
          if (
            this.startDate !== "" &&
            this.endDate !== "" &&
            this.preparatoryPeriod !== "" &&
            this.incubatePeriod !== ""
          ) {
            this.disabled = true
            setRules(data).then((res) => {
              let that = this;
              if (res.code == 0) {
                this.$message.success(res.data);
                setTimeout(() => {
                  that.getRules();
                }, 50);
                this.detailVisible = false;
                setTimeout(() => {
                  this.disabled = false
                }, 0.3 * 1000);

              } else {
                this.$message.error(res.data);
                this.disabled = false
              }
            });
          } else {
            this.$message.warning("请检查是否开启规则和开启结束时间的选择");
          }
        }
      })
    },
    onChange1(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      this.startDate = time;
    },
    onChange2(val) {
      let date = new Date(val);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      this.endDate = time;
    },
    onChange3(val) {

      this.preparatoryPeriod = val;
    },
    onChange4(val) {
      // console.log(val);
      if (val === true) {
        this.isOpen = 0;
        // console.log(this.isOpen);
      } else {
        this.isOpen = 1;
      }
    },
    onChange5(val) {

      this.incubatePeriod = val;
    },

    // 第二板块内容逻辑
    onSetf() {
      const data = this.paramsSetForm;
      this.paramsSetFormData = {
        areatarget: data.areatarget, //县
        citytarget: data.citytarget, //市
        contributionvalue: data.contributionvalue, //指标
        gloaltarget: data.gloaltarget, //全球
        provincetarget: data.provincetarget, //省
        incubateid: data.incubateid,
      };
      this.setVisible = true;
    },
    //储存
    saveForm2() {

      this.$refs.paramsSetFormData.validate((valid) => {
        if (valid) {
          this.disload=true
          saveIncubateCompanyConfig(this.paramsSetFormData)
            .then((data) => {
              if (data.code != 0) {
                this.$message.error(response.message);
                this.disload=false
                return false;
              }
              this.$message.success("设置成功");
              this.setVisible = false;
              setTimeout(() => {
                this.disload=false
              }, 0.3*1000);

              this.getGlobalBrandList();
            })
            .catch((err) => {
              this.$message.error(err);
              this.disload=false
            });
        }
      });
    },
    //第三板块内容
    onSete() {
      this.$router.push({ path: "appendEntity" });
    },
    // 列表数据获取
    postList() {

      postList(this.query)
        .then((data) => {
          // console.log(data);
          if (data.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          this.tableData3 = data.data.list || [];
        })
        .catch((err) => {
          this.tableData3 = [];
        });
    },
  },

  created() {
    this.getRules();
    this.postList();
    this.getGlobalBrandList();
  },
};
</script>
<style lang="scss" scoped>
.el-form-item /deep/ .el-form-item__label {
  font-size: 16px;
}
.content {
  display: flex;
  margin: 0 auto;
}
.cardLeft {
  width: 48%;

}
.cardRight {
  width: 48%;
  margin-left: 4%;

}

.contentNext{
  display: flex;
  margin: 60px auto;
}

.nextLeft {
  width: 48%;
  margin-top: 3%;

}
</style>
